<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>
    <title>LangV</title>

    <link href="/css/ui-element.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">
    <script th:src="@{/js/html5shiv.js}"></script>
    <script th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
    <style> /*v-clock 解决闪烁{{后端参数}}的问题，在id=app的div内声明v-clock即可*/
    [v-clock] {
        display: none;
    }
    </style>
</head>

<body class="mybody">

<!-- left side start-->
<!-- left side end-->

<!-- main content start-->

<!-- header section start-->
<div th:replace="common/header::top"></div>
<!-- header section end-->

<!-- page heading start-->
<!-- page heading end-->

<!--body wrapper start-->
<div class="wrapper ">
    <div class="row ">
        <div id="app" v-clock class="col-sm-10" style="left: 8.3%">
            <div >
                <section class="panel">
                    <div class="panel-body">
                        <div style="margin-top: -10%">
                            <div class="media-gal2">
                                <div class="col-md-12">
                                    <section class="panel">
                                        <div >
                                            <div class="panel-body">
                                                <div class="wrapper">
                                                    <el-tabs @tab-click="changeTab" v-model="activeTabName">
                                                        <el-tab-pane label="待审核视频" name="0">
                                                            <div style="width: 50%">
                                                                <el-input
                                                                        @change="getUnApprovedVideo()"
                                                                        placeholder="关键字搜索"
                                                                        v-model="UnApprovedKeyword">
                                                                </el-input>
                                                            </div>

                                                            <el-table
                                                                    :data="UnApprovedVideo"
                                                                    height="550"
                                                                    stripe
                                                                    style="width: 100%">
                                                                <el-table-column
                                                                        label="标题"
                                                                        prop="title"
                                                                >
                                                                    <template slot-scope="scope">
                                                                        <a style="color: #00a1d6"
                                                                           :href="'/video/toVideo/'+(scope.row.id)">
                                                                            <span style="margin-left: 10px">{{ scope.row.title }}</span>
                                                                        </a>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column
                                                                        label="简介"
                                                                        prop="introduction"
                                                                >
                                                                    <template slot-scope="scope">
                                                                        <span style="margin-left: 10px">{{ scope.row.introduction }}</span>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column
                                                                        label="时长"
                                                                        prop="time"
                                                                        width="120">
                                                                    <template slot-scope="scope">
                                                                        <span style="margin-left: 10px">{{ scope.row.time }}</span>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column
                                                                        label="作者"
                                                                        prop="username"
                                                                        width="120">
                                                                    <template slot-scope="scope">
                                                                        <div slot="reference" class="name-wrapper">
                                                                            {{ scope.row.username }}
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column
                                                                        label="封面"
                                                                        prop="img"
                                                                        width="150"
                                                                >
                                                                    <template slot-scope="scope">
                                                                        <el-image
                                                                                style="width: 100px; height: 100px"
                                                                                :src="'/video/getImg/'+(scope.row.id)"
                                                                                :fit="'contain'"></el-image>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column width="200" label="操作">
                                                                    <template slot-scope="scope">
                                                                        <div>
                                                                            <el-button
                                                                                    size="mini"
                                                                                    type="success"
                                                                                    @click="handleApprove(scope.$index, scope.row,1)">
                                                                                通过
                                                                            </el-button>
                                                                            <el-button
                                                                                    size="mini"
                                                                                    type="info"
                                                                                    @click="handleApprove(scope.$index, scope.row,-1)">
                                                                                不通过
                                                                            </el-button>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                            </el-table>
                                                        </el-tab-pane>
                                                        <el-tab-pane label="视频管理" name="1">
                                                            <template>
                                                                <div style="width: 50%">
                                                                    <el-input
                                                                            @change="getVideo()"
                                                                            placeholder="关键字搜索"
                                                                            v-model="keyword">
                                                                    </el-input>
                                                                </div>

                                                                <el-table
                                                                        :data="videos"
                                                                        height="550"
                                                                        stripe
                                                                        style="width: 100%">
                                                                    <el-table-column
                                                                            label="标题"
                                                                            prop="title"
                                                                    >
                                                                        <template slot-scope="scope">
                                                                            <a style="color: #00a1d6"
                                                                               :href="'/video/toVideo/'+(scope.row.id)">
                                                                                <span style="margin-left: 10px">{{ scope.row.title }}</span>
                                                                            </a>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            label="简介"
                                                                            prop="introduction"
                                                                    >
                                                                        <template slot-scope="scope">
                                                                            <span style="margin-left: 10px">{{ scope.row.introduction }}</span>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            label="时长"
                                                                            prop="time"
                                                                            sortable
                                                                            width="120">
                                                                        <template slot-scope="scope">
                                                                            <span style="margin-left: 10px">{{ scope.row.time }}</span>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            label="作者"
                                                                            prop="username"
                                                                            :filters="userFilters"
                                                                            :filter-method="filterHandler"
                                                                            width="120">
                                                                        <template slot-scope="scope">
                                                                            <div slot="reference" class="name-wrapper">
                                                                                {{ scope.row.username }}
                                                                            </div>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            label="状态"
                                                                            prop="status"
                                                                            :filters="statusFilters"
                                                                            :filter-method="filterHandler"
                                                                            width="120">
                                                                        <template slot-scope="scope">
                                                                            <div slot="reference" class="name-wrapper">
                                                                                <el-tag type="info" v-if="scope.row.status==0">{{statusMap[scope.row.status]}}</el-tag>
                                                                                <el-tag type="success" v-if="scope.row.status==1">{{statusMap[scope.row.status]}}</el-tag>
                                                                                <el-tag type="warning" v-if="scope.row.status==-1">{{statusMap[scope.row.status]}}</el-tag>
                                                                            </div>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            label="封面"
                                                                            prop="img"
                                                                            width="150"
                                                                    >
                                                                        <template slot-scope="scope">
                                                                            <el-image
                                                                                    style="width: 100px; height: 100px"
                                                                                    :src="'/video/getImg/'+(scope.row.id)"
                                                                                    :fit="'contain'"></el-image>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column width="100" label="操作">
                                                                        <template slot-scope="scope">
                                                                            <el-button
                                                                                    size="mini"
                                                                                    type="danger"
                                                                                    @click="handleDelete(scope.$index, scope.row)">
                                                                                删除
                                                                            </el-button>
                                                                        </template>
                                                                    </el-table-column>
                                                                </el-table>
                                                            </template>
                                                        </el-tab-pane>
                                                    </el-tabs>

                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>

                                <div class="col-md-10 text-right clearfix">
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

    </div>
</div>
<!--body wrapper end-->
<!--footer section start-->
<!--footer section end-->
<div th:replace="common/header::footer"></div>
<script src="/js/vue2.js"></script>
<script src="/js/ui_element.js"></script>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.isotope.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/scripts.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            videos: [],
            UnApprovedVideo: [],
            activeTabName: "0",
            keyword: "",
            UnApprovedKeyword: "",
            userFilters: [],
            statusFilters: [],
            statusMap:{"0":'未审核',"1":"已通过","-1":"未通过"},
        },
        created() {
        },
        mounted() {
            this.getUnApprovedVideo();
        },
        methods: {
            getUnApprovedVideo() {
                axios.get('/admin/getUnApprovedVideo?keyword=' + this.keyword).then(res => {
                    this.UnApprovedVideo = res.data;
                })
            },
            getVideo() {
                axios.get('/admin/getVideo?keyword=' + this.keyword).then(res => {
                    this.videos = res.data;
                    this.userFilters = Array.from(new Set(this.videos.map(r => r.username))).map(n => {
                        return {"text": n, "value": n}
                    });
                    this.statusFilters = Array.from(new Set(this.videos.map(r => r.status))).map(n => {
                        return {"text": this.statusMap[n], "value": n}
                    });
                })
            },
            deleteVideo(id) {
                axios.get('/admin/deleteVideo?id=' + id).then(res => {
                    if (res.data) {
                        this.getVideo();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.deleteVideo(row.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            changeTab(event) {
                if (event.index == 0) {
                    this.getUnApprovedVideo();
                }
                if (event.index == 1) {
                    this.getVideo();
                }

            },
            handleApprove(index, row, status) {
                axios.get(`/admin/approvePass/${row.id}/${status}`).then(res => {
                    this.UnApprovedVideo.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                })
            }
        }
    })

</script>

</body>
</html>
